<template>
  <el-dialog
    :title="showTitle"
    :visible="policyDialog"
    width="630px"
    class="policy-dialog"
    @close="handleClose"
  >
    <el-form
      ref="dialogForm"
      label-position="right"
      label-width="120px"
      :model="form"
      :inline="true"
      :rules="rules"
    >
      <el-form-item prop="policyName" label="策略名称：" class="form-item">
        <el-input
          v-model="form.policyName"
          placeholder="请输入"
          maxlength="15"
          type="text"
          show-word-limit
        />
      </el-form-item>
      <el-form-item prop="discount" label="策略方案：" class="form-item">
        <el-input
          v-model="form.discount"
          class="price"
          placeholder="请输入"
          type="text"
        >
          <div slot="append" class="upDown">
            <el-button
              :disabled="form.discount >= 100 ? true : false"
              icon="el-icon-arrow-up"
              style="border-bottom: 1px solid #dcdfe6;"
              @click="upDiscount"
            />
            <el-button
              :disabled="form.discount <= 1 ? true : false"
              icon="el-icon-arrow-down"
              @click="downDiscount"
            />
          </div>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">取 消</el-button>
      <el-button
        v-loading="loading"
        type="primary"
        class="confirm"
        @click="handleSubmit"
      >确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postPolicyAPI, putPolicyEditAPI } from '@/api/strategy'
export default {
  name: '',
  components: {},
  props: {
    policyDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        discount: ''
      },
      rules: {
        policyName: [{ required: true, message: '请输入', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      loading: false
    }
  },
  computed: {
    showTitle() {
      return `${this.form.policyId ? '修改' : '新增'}策略`
    }
  },
  watch: {
    form: {
      handler() {
        if (this.form.discount !== '') {
          if (this.form.discount > 100) {
            this.form.discount = 100
          }
          if (this.form.discount < 1) {
            this.form.discount = 1
          }
        }
      },
      deep: true
    }
  },
  created() {},
  methods: {
    // 退出
    handleClose() {
      this.$emit('update:policyDialog', false)
      this.$refs.dialogForm.resetFields()
      this.form = {}
    },
    // 加
    upDiscount() {
      this.form.discount = +this.form.discount + 1
    },
    // 减
    downDiscount() {
      this.form.discount = +this.form.discount - 1
    },
    async handleSubmit() {
      try {
        await this.$refs.dialogForm.validate()
        console.log(this.form)
        this.loading = true
        this.form.policyId ? await putPolicyEditAPI(this.form) : await postPolicyAPI(this.form)
        console.log(this.form.policyId)
        this.$message.success(`${this.form.policyId ? '修改' : '新增'}策略成功`)
        this.handleClose()
        this.$parent.getPolicySearch()
      } catch (error) {
        if (error.response.status === 500) {
          this.$message.error(error.response.data)
        }
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss">
.form-item {
  .el-form-item__content {
    width: 70%;
  }
  .el-input-group__append{
    padding: unset;
  }
}
.policy-dialog {
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__body {
    padding: 10px 40px;
  }
}
.upDown {
  .el-button {
    padding: unset;
    flex: 1;
    margin-left: unset;
    margin: 0;
  }
}
</style>
<style scoped lang='scss'>
.dialog-footer {
  text-align: center;
}
.form-item {
  width: 100%;
}
.cancel {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background-color: #fbf4f0 !important;
  border: none;
  color: #655b56 !important;
}
.confirm {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
  margin-left: 34px;
}
.upDown {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 46px;
  height: 40px;
}
</style>
